<template>
	<view>
		<hx-navbar title="支付订单" :backgroundColor="[241,241,241]"></hx-navbar>
		<view class="head">
			<view class="row">
				<!-- <text v-if="countdownStr">支付剩余时间 {{countdownStr}}</text> -->
				<!-- <text v-else>重新提交订单</text> -->
			</view>
			<view class="row pricebox pt-8">
				<text class="fh">￥</text>
				<text class="txt1">{{orderInfo.money}}</text>
			</view>
			<view class="row pt-4" @click="doOrder">
				<text>{{orderInfo.shopName}}</text>
				<text v-if="orderInfo.community">（{{orderInfo.community}}）</text>
				<text>订单详情</text>
				<i class="hxicon-right"></i>
			</view>
		</view>
		<view class="container">
			<radio-group @change="payChange" class="list-box">
				<block v-for="(item,i) in payData" :key="i">
					<view class="flex-rl list-item">
						<view class="left">
							<view class="iconbox" :style="'background-color:' + item.icon_color">
								<i :class="item.icon"></i>
							</view>

						</view>
						<view class="b-b right">
							<view class="tit-box">
								<text class="tit">{{item.name}}</text>
							</view>
							<radio :value="item.id" color="#ffcc33" :checked="item.default == 1" />
						</view>
					</view>
				</block>
			</radio-group>
		</view>
		<view class="btn" @click="submitPay">
			<text>确认支付</text>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			let that = this
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			let curParam = routes[routes.length - 1].options; //获取路由参数
			console.log('curParam',curParam)
			uni.request({
				url: that.baseURL + `/system/orders/getOrderInfo/${curParam.id}`,
				success: (res) => {
					console.log(res);
					that.orderInfo = res.data
					console.log(that.orderInfo)
				}
			})
			// uni.getStorage({
			// 	key: 'orderInfo',
			// 	success: (res) => {
			// 		console.log('res.data', res.data)
			// 		that.orderInfo = res.data
			// 		console.log('that.orderInfo', that.orderInfo)
			// 	}
			// })
		},

		onReady() {
			// that.countdown();

			for (let i in this.payData) {
				if (this.payData[i].default == 1) {
					this.payType = this.payData[i].id
				}
			}
		},
		data() {
			return {
				countdownStr: "00:00",
				//订单信息
				orderInfo: {},
				//默认支付方式
				payType: "wxpay",
				// 支付方式
				payData: [{
						id: "wxpay",
						name: "微信支付",
						icon: "hxicon-weixinzhifu",
						icon_color: "#09bb07",
						default: 0,
					},
					{
						id: "alipay",
						name: "支付宝支付",
						icon: "hxicon-zhifubaozhifu",
						icon_color: "#08a0e9",
						default: 1
					},
					{
						id: "moni",
						name: "模拟支付",
						icon: "hxicon-weixinzhifu",
						icon_color: "#000",
						default: 1
					}
				],

			}
		},
		methods: {

			payChange(event) {

				this.payType = event.target.value
			},
			doOrder() {
				//查看订单
				uni.showModal({
					content: '这是查看订单的事件',
					showCancel: false,
					confirmColor: "#999",
					success: function(res) {

					}
				});
			},

			//倒计时
			countdown() {
				var nowTime = new Date();
				var createdTime = new Date();
				var TIME = 1000 * 60 * 30;
				// 目标时间和当前时间的毫秒数
				var differ = nowTime - createdTime;
				// 目标时间超过当前时间，或目标时间与当前时间的差超过30分钟则返回0
				if (differ < 0 || differ > TIME) {
					return 0;
				};
				// 剩余时间的秒数
				differ = TIME - differ;
				// 计算分钟数
				var minute = Math.floor(differ / (60 * 1000));
				minute = minute < 10 ? '0' + minute : minute;
				// 计算秒数
				var second = Math.floor((differ - minute * (60 * 1000)) / 1000);
				second = second < 10 ? '0' + second : second;
				// 返回结果格式 29:59
				var str = minute + ':' + second;
				this.countdownStr = str
				setTimeout(this.countdown, 1000);
			},
			//显示弹窗
			showPrompt() {
				uni.showModal({
					content: '支付超时，请重新下单',
					showCancel: false,
					confirmText: "重新下单",
					confirmColor: "#999",
					success: function(res) {
						if (res.confirm) {

						}
					}
				});
			},
			//确认支付
			submitPay() {
				console.log("跳转支付成功页面")
				uni.request({
					url: this.baseURL + `/system/orders/pay/${this.orderInfo.orderNo}`,
					success: (res) => {
						uni.showModal({
							title: '提示',
							content: '确认支付么',
							success: function(resp) {
								if (resp.confirm) {
									console.log('用户点击确定');
									uni.navigateTo({
										url: '/pages/paySuccess/paySuccess'
									})
								} else if (resp.cancel) {
									console.log('用户点击取消');
									uni.navigateTo({
										url: '/pages/paySuccess/paySuccess'
									})
								}
							}
						});
					}
				})

				uni.removeStorage({
					key: 'shopping_cart'
				})
				uni.removeStorage({
					key: 'address'
				})
				uni.removeStorage({
					key: 'totalPrice'
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.pt-8 {
		margin-top: 8px;
	}

	.pt-4 {
		margin-top: 4px;
	}

	.flex-rl {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.head {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 30px 15px;

		.row {
			display: flex;
			flex-direction: row;
			justify-content: center;
			font-size: 12px;
			color: #888;

			.fh {
				font-size: 16px;
				font-weight: bold;
				color: #000;
			}

			.txt1 {
				font-size: 34px;
				font-weight: bold;
				color: #000;
			}

			[class*="hxicon-"] {
				position: relative;
				top: 3px;
				margin-left: 3px;
			}
		}

		.pricebox {
			display: flex;
			flex-direction: row;
			align-items: baseline;
		}

	}

	.container {
		margin: 15px;
		border-radius: 10px;
		background-color: #fff;
		overflow: hidden;
		padding: 0 8px 0 14px;

		.list-box {
			display: flex;
			flex-direction: column;

			.list-item {
				display: flex;
				flex-direction: row;

				align-items: center;
				height: 50px;


				.left {
					display: flex;
					flex-direction: row;
					align-items: center;

					.iconbox {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						height: 24px;
						width: 24px;
						border-radius: 4px;

						[class*="hxicon-"] {
							font-size: 22px;
							color: #fff;
						}

					}


				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;
					flex: 1;
					height: 100%;

					.tit-box {
						flex: 1;

						.tit {
							font-size: 16px;
							color: #333;
							margin-left: 6px;
						}
					}

				}
			}
		}
	}

	.btn {
		position: fixed;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		overflow: hidden;
		bottom: 15px;
		left: 15px;
		right: 15px;
		height: 45px;
		font-size: 16px;
		font-weight: bold;
		color: #333;
		background: linear-gradient(45deg, #ffcc33, #ffcc33);
	}
</style>
